<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- <p v-color>我是段落</p> -->
            <p v-color="curColor">我是段落</p>
            <input type="text" v-focus>
        </div>
        <script>
            /*
            directive方法接收两个参数
            第一个参数：指令名称
            第二个参数：对象
            注意点：在自定义指令的时候，在指定指令名称的时候不需要写v-
            注意点：指令可以在不同的生命周期阶段执行
            bind：指令被绑定到元素上的时候执行
            inserted：绑定指令的元素被添加到父元素上的时候调用
            */ 
            Vue.directive("color", {
                // el标识被绑定指令的元素
                bind: function(el, obj){
                    // el.style.color = "red";
                    el.style.color = obj.value
                }
            })

            Vue.directive("focus", {
                // el标识被绑定指令的元素
                inserted: function(el){
                    el.focus()
                }
            })
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1",
                    curColor:'green'
                }
            });
        </script>
    </body>
</html>